<template>
  <div>
    <div v-if="ClassData" class="box">
      <div v-for="(item) in ClassData" :key="item.id" class="classitem">
        <img :src="item.icon">
        <p>{{item.name}}</p>
      </div>
    </div>
    <div v-else>正在加载数据...</div>
  </div>
</template>

<script>
export default {
  name: "ShoppingClasstView",
  data() {
    return {};
  },
  props: {
    ClassData: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  mounted() {
    console.log(this.listData);
  }
};
</script>
<style scoped lang="less">
.box {
  overflow: hidden;
  width: 100%;
}
.classitem {
  width: 33%;
  float: left;
  img {
    width: 2.5rem;
    display: block;
    margin: 15px auto;
  }
  p {
    font-size: 0.8rem;
    text-align: center;
  }
}
</style>